<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
    font-size: 18px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<template>
  <el-container>
    <el-header>
      <div class="page-container">

        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :model="filters" :size="size" ref="filters" class="form">
            <el-form-item prop="data">
              <el-date-picker
                v-model="filters.startDate"
                type="date"
                :editable="false"
                prefix-icon="el-icon-caret-bottom"
                value-format="yyyy-MM-dd"
                :clearable='false'
                placeholder="开始时间">
              </el-date-picker>
              <span style="padding: 0 3px">--</span>
              <el-date-picker
                v-model="filters.endDate"
                type="date"
                :editable="false"
                prefix-icon="el-icon-caret-bottom"
                value-format="yyyy-MM-dd"
                :clearable='false'
                placeholder="结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-select v-model="filters.channel" filterable  style="width: 100%" placeholder="选择渠道" >
                <el-option
                  v-for="item in channels"
                  :key="item.id"
                  :label="item.val"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select v-model="filters.merchant" style="width: 200px;" placeholder="请选择商家">
                <el-option label="录屏商家01" value="1"></el-option>
                <el-option label="录屏商家02" value="2"></el-option>
                <el-option label="育学园" value="3"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select v-model="filters.store" style="width: 200px;" placeholder="请选择店铺">
                <el-option label="京东店" value="1"></el-option>
                <el-option label="天猫店" value="2"></el-option>
                <el-option label="张小二店" value="3"></el-option>
              </el-select>
            </el-form-item>


            <el-form-item>
              <el-input v-model="filters.brand" placeholder="品牌"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="filters.category" placeholder="类目"></el-input>
            </el-form-item>

            <el-row>

              <el-form-item>
                <kt-button icon="fa fa-search" label="查询" type="primary" @click="queryInfo" />
              </el-form-item>
              <el-form-item>
                <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"  />
              </el-form-item>

            </el-row>
          </el-form>
        </div>

      </div>
    </el-header>
    <el-main>
      <el-row :gutter="12" style="margin-top: 10%">
        <el-col :span="6">
            <div  id="main" style="width: 600px;height:400px;"></div>
        </el-col>
        <el-col :span="6" :offset="6">
            <div id="main2" style="width: 600px;height:400px;"></div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="销额榜" name="first">
            <div  id="tab1" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
          <el-tab-pane label="销量榜" name="second">
            <div  id="tab2" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
          <el-tab-pane label="PV榜" name="third">
            <div  id="tab3" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
          <el-tab-pane label="毛利榜" name="fourth">
            <div  id="tab4" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
          <el-tab-pane label="口碑榜" name="fifth">
            <div  id="tab5" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
          <el-tab-pane label="复购榜" name="sixth">
            <div  id="tab6" style="width: 600px;height:400px;"></div>
          </el-tab-pane>
        </el-tabs>
      </el-row>

    </el-main>
  </el-container>


</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import KtTable from "@/views/Core/KtTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import CyTable from "@/views/Core/CyTable";

  export default {
    components: {
      PopupTreeInput,
      KtTable,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        loading: false,
        dialogVisibleImage: false,
        activeName: "first",
        filters: {
          startDate:"",
          endDate:"",
          channel:"",
          merchant:"",
          store:"",
          brand:"",
          category:""
        },
        // 新增编辑界面数据
        dataForm: {
          member_id: '',
          title: '',
          type: '',
          content: '',
        },
        names:{},//用户姓名
        options:{},//消息类型
        channels:[
          {id:1,val:"BBC"},
          {id:2,val:"天猫"},
          {id:3,val:"京东"}
        ],
        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},
        checked: [],
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        checkpage: false,
        deptData: [],
        deptTreeProps: {
          label: "name",
          children: "children"
        },
        roles: []
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },

      tabDraw6(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab6'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '复购榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [3, 2.8, 2, 1.5, 1, 1]
            }
          ]
        });
      },

      tabDraw5(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab5'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '口碑榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [9, 6, 3, 1.5, 1, 0.5]
            }
          ]
        });
      },

      tabDraw4(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab4'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '毛利榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [565.64, 84.16, 51.8, 20, 15, 5]
            }
          ]
        });
      },
      tabDraw3(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab3'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: 'PV榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [72, 61, 31, 30, 27, 19]
            }
          ]
        });
      },

      tabDraw2(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab2'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '销量榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [13, 6, 4, 2, 2, 1]
            }
          ]
        });
      },

      tabDraw1(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('tab1'))
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          title: {
            text: '销售榜'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['2019年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['新建商品','安抚商品xy','便宜的商品','测试商品','小玉商品','2号店米粉']
          },
          series: [
            {
              name: '2019年',
              type: 'bar',
              data: [565.64, 84.16, 51.8, 20, 10, 5]
            }
          ]
        });
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('main'))
        // 绘制图表
        myChart.setOption({
          title: { text: '商品类目销量' },
          tooltip: {},
          series: [{
            type: 'treemap',
            data: [{
              name: '米面粥',            // First tree
              value: 80
            }, {
              name: 'nodeB',            // Second tree
              value: 20,
              children: [{
                name: '安抚玩偶',       // Son of Second tree
                value: 70
              },{
                name: '奶制品',       // Son of Second tree
                value: 20
              },{
                name: '代步工具',       // Son of Second tree
                value: 10
              }]
            }]
          }]
        });
      },

      drawLine2(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('main2'))
        // 绘制图表
        myChart.setOption({
          title: { text: '品牌综合表现' },
          xAxis: {},
          yAxis: {},
          series: [{
            type: 'scatter',
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ]
          }]
        });
      },

      findPage: function(data) {
        this.filters.t = "messageManage";
        this.$refs.CyTable.findPage(this.filters);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'messageManage'
        }).then(() => {
          let filename="会员消息列表"
          this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename);
        }).catch(() => {
        });
      } ,
      // 批量删除
      handleDelete: function(data) {
        var ids = "";
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ",";
        }
        data.params.t = "messageManage";
        data.params.ids = ids;
        this.utils.request.deleteUserInfo(data.params, data.callback);
      },
      // 显示新增界面
      handleAdd: function () {
        this.dialogVisible = true
        this.operation = true
        this.dataForm={

        }
      },
      deleteInfoBack: function() {
        this.findPage();
        this.dialogVisible = false;
        this.operation = false;
      },
      // 显示查询
      queryInfo: function() {
        this.findPage(this.filters);
      },
      selectionChange: function(params) {
        console.log(params);
        this.checked = params.selections;
      },




      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },


      // 编辑
      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataForm);
              params.t = "messageManage";
              this.utils.request.editUserInfo(params, this.editInfoBack);
            });
          }
        });
      }, // 新增修改回调
      editInfoBack: function() {
        this.findPage();
        this.dialogVisible = false;
        this.operation = false;
        this.editLoading = false;
      },

      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },

      // 处理表格列过滤显示
      initColumns: function() {
        this.columns = [
          { prop: "id", label: "ID", minWidth: 50 },
          { prop: "nickname", label: "用户名称", minWidth: 120 },
          { prop: "title", label: "标题", minWidth: 120 },
          { prop: "typeval", label: "消息类型", minWidth: 120 },
          { prop: "content", label: "消息内容", minWidth: 120 },
          { prop: "status", label: "状态", minWidth: 120, formatter: this.showStatus},
          { prop: "create_time", label: "创建时间", minWidth: 120,}

        ];
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },

      resetForm(formName) {
        (this.filters = {
          t: "messageManage",

        }),
          this.findPage();
      },

      showStatus(row, column, cellValue, index) {
        if (cellValue == 0) {
          return "未读";
        }
        if (cellValue == 1) {
          return "已读";
        }
      },

      // 消息类型
      queryUserList(){
        var that=this;
        this.utils.request.queryUserList({'t':'sysConfig','type':'msg_type'},function(data){
          that.options=data.data
        })
      },

      // 用户姓名
      queryName(){
        var that=this;
        this.utils.request.queryUserList({'t':'member'},function(data){
          that.names=data.data
        })
      },



  },
    mounted() {
      this.initColumns();
      this.queryUserList();
      this.queryName();
      this.drawLine();
      this.drawLine2();
      this.tabDraw1();
      this.tabDraw2();
      this.tabDraw3();
      this.tabDraw4();
      this.tabDraw5();
      this.tabDraw6();
    }
  };
</script>

<style scoped>
  /deep/ .form .el-input__inner {
    width: 200px !important;
  }
</style>
